<template>
	<view>
		<view class="edit-item">
			<view class="flex align-center">
				<view class="title must">设备号</view>
				<view class="flex align-center justify-between w-max-100">
					<input class="edit-font w-max-100" type="text" v-model="device_number" placeholder="请输入" />
				</view>
			</view>

			<view class="flex align-center">
				<view class="title must">品牌</view>
				<picker class="w-max-100" :range="pickerLict.manufacturer_list" range-key="name" :value="manufacturer_index"
				 @change="pickerChange($event, 'manufacturer_index')">
					<view class="flex align-center justify-between w-max-100">
						<view class="edit-font">{{manufacturer_index >= 0 ? pickerLict.manufacturer_list[manufacturer_index].name: ' '}}</view>
						<image class="right-icon" src="../../static/images/right.png" mode=""></image>
					</view>
				</picker>
			</view>

			<view class="flex align-center">
				<view class="title must">运营商</view>
				<picker class="w-max-100" :range="pickerLict.operator_list" range-key="operator_name" :value="operator_index"
				 @change="pickerChange($event, 'operator_index')">
					<view class="flex align-center justify-between w-max-100">
						<view class="edit-font">{{operator_index >= 0 ? pickerLict.operator_list[operator_index].operator_name: ' '}}</view>
						<image class="right-icon" src="../../static/images/right.png" mode=""></image>
					</view>
				</picker>
			</view>

			<view class="flex align-center">
				<view class="title must">运营商编码</view>
				<view class="flex align-center justify-between w-max-100">
					<input class="edit-font w-max-100" type="text" disabled v-model="operator_code" />
				</view>
			</view>

			<view class="flex align-center">
				<view class="title must">种类</view>
				<picker class="w-max-100" :range="pickerLict.kind_list" range-key="kind_name" :value="kind_index" @change="pickerChange($event, 'kind_index')">
					<view class="flex align-center justify-between w-max-100">
						<view class="edit-font">{{kind_index >= 0 ? pickerLict.kind_list[kind_index].kind_name: ' '}}</view>
						<image class="right-icon" src="../../static/images/right.png" mode=""></image>
					</view>
				</picker>
			</view>

			<view class="flex align-center">
				<view class="title must">地址</view>
				<view class="flex justify-between align-center w-max-100" @click="openAddres">
					<view class="value w-max-100 edit-font">{{city || ' '}}</view>
					<image class="right-icon" src="../../static/images/right.png" mode=""></image>
				</view>
			</view>

			<view class="flex align-center">
				<view class="title must">街道</view>
				<view class="flex align-center justify-between w-max-100">
					<input class="edit-font w-max-100" type="text" v-model="street" placeholder="请输入" />
				</view>
			</view>

			<view class="flex align-center">
				<view class="title must">社区</view>
				<view class="flex align-center justify-between w-max-100">
					<input class="edit-font w-max-100" type="text" v-model="community" placeholder="请输入" />
				</view>
			</view>

			<view class="flex align-center">
				<view class="title must">村庄</view>
				<view class="flex align-center justify-between w-max-100">
					<input class="edit-font w-max-100" type="text" v-model="village" placeholder="请输入" />
				</view>
			</view>

			<view class="flex align-center">
				<view class="title must">具体位置</view>
				<view class="flex align-center justify-between w-max-100">
					<input class="edit-font w-max-100" v-model="address" type="text" placeholder="请输入" />
				</view>
			</view>

			<view class="flex align-center">
				<view class="title must">经纬度</view>
				<view class="flex align-center justify-between">
					<view style="flex-shrink: 0;">经度</view>
					<input class="ml-1 edit-font" type="text" v-model="longitude" placeholder="请输入" />
				</view>
				<view class="flex align-center justify-between">
					<view style="flex-shrink: 0;">纬度</view>
					<input class="ml-1 edit-font" v-model="latitude" type="text" placeholder="请输入" />
				</view>
			</view>

			<view class="flex align-center">
				<view class="title must">端口数量</view>
				<view class="flex align-center justify-between w-max-100">
					<input class="edit-font w-max-100" type="number" v-model="port" placeholder="请输入" />
				</view>
			</view>

			<view class="flex align-center">
				<view class="title must">安装日期</view>
				<picker class="w-max-100" mode="date" :value="installtime" @change="pickerChange($event, 'installtime')">
					<view class="flex align-center justify-between w-max-100">
						<view class="edit-font">{{installtime || ' '}}</view>
						<image class="right-icon" src="../../static/images/right.png" mode=""></image>
					</view>
				</picker>
			</view>

			<view class="flex align-center">
				<view class="title must">电表编码</view>
				<view class="flex align-center justify-between w-max-100">
					<input class="edit-font w-max-100" v-model="meter_code" type="number" placeholder="请输入" />
				</view>
			</view>

			<view class="flex align-center">
				<view class="title">设备型号</view>
				<view class="flex align-center justify-between w-max-100">
					<input class="edit-font w-max-100" v-model="unit_type" type="text" placeholder="请输入" />
				</view>
			</view>
			<view class="flex align-center">
				<view class="title">功率</view>
				<view class="flex align-center justify-between w-max-100">
					<input class="edit-font w-max-100" v-model="powers" type="text" placeholder="请输入" />
				</view>
			</view>
			<view class="flex align-center">
				<view class="title">安装方式</view>
				<picker class="w-max-100" :range="azfsArr" :value="azfsIndex" @change="pickerChange($event, 'azfsIndex')">
					<view class="flex align-center justify-between w-max-100">
						<view class="edit-font">{{azfsIndex >= 0 ? azfsArr[azfsIndex]: ' '}}</view>
						<image class="right-icon" src="../../static/images/right.png" mode=""></image>
					</view>
				</picker>
			</view>
			<view class="flex align-center">
				<view class="title">充电方式</view>
				<picker class="w-max-100" :range="cdfsArr" :value="csfsIndex" @change="pickerChange($event, 'csfsIndex')">
					<view class="flex align-center justify-between w-max-100">
						<view class="edit-font">{{csfsIndex >= 0 ? cdfsArr[csfsIndex]: ' '}}</view>
						<image class="right-icon" src="../../static/images/right.png" mode=""></image>
					</view>
				</picker>
			</view>

			<view>
				<view class="flex mb-4 align-center justify-between"><view class="title must">拍照</view><view class="font-sm text-primary" @click="ckslImg">参考示例</view></view>
				<view class="flex flex-wrap clzp-box">
						<!-- 图片 -->
						<view class="img-box mb-2" v-for="(item,index) in images" :key="index">
							<image class="clear-img" @click.stop="clearFile(index)" src="../../static/images/clear-img.png"></image>
							<image mode="aspectFit" :src="item | imgUrl" @click.stop="lookImg(item)"></image>
						</view>
						<!-- 视频 -->
						<view class="img-box mb-2" v-for="(item,index) in files" :key="index">
							<image class="clear-img" @click.stop="clearFile(index)" src="../../static/images/clear-img.png"></image>
							<video :src="item.path | imgUrl" controls :duration="item.time" ></video>
						</view>
					<view class="mb-2">
						<view class="img-box mb-2">
							<image src="../../static/images/up-img.png" @click="upFileImg()"></image>
						</view>
					</view>

				</view>
			</view>
		</view>

		<view class="edit-btn" @click="sendType">添加充电桩</view>

		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
	</view>
</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	import util from "../../utils/util.js";
	import {
		upFile,url
	} from "../../utils/url.js"
	import {
		postChargePileSelect,
		postAddChargePile
	} from "../../api/user.js";
	import {
		wechatConfig
	} from '../../api/public.js';
	export default {
		components: {
			simpleAddress
		},
		data() {
			return {
				pickerLict: [],
				manufacturer_index: -1, // 品牌
				operator_index: -1, // 运营商
				kind_index: -1, // 种类
				cityPickerValueDefault: [0, 0, 0],
				
				azfsArr: ["落地式", "挂壁式"],
				azfsIndex: -1,
				
				cdfsArr: ["直流","交流", "交直流一体"],
				csfsIndex: -1,

				device_number: '', // 设备编号
				operator_code: '', // 运营商编码
				city: '', // 地址
				street: '', // 街道
				community: '', // 社区
				village: '', // 村庄
				address: '', // 具体位置

				longitude: '', // 经度
				latitude: '', // 纬度
				port: '', // 端口数量
				installtime: '', // 安装日期
				meter_code: '', // 电表编码

				unit_type: '', //设备型号
				powers: '', // 功率
				install_way: '', // 安装方式
				recharge_way: '', // 充电方式
				images: [], // 图片
				files: [], // 视频
			}
		},
		filters:{
			imgUrl(img) {
				if(img.indexOf('http') != -1) return img;
				if(img.indexOf('http') == -1) return url + img
			}
		},
		onLoad() {
			this.init();
			// #ifdef H5
			// this.getUserlocation()
			// #endif
		},
		methods: {

			async init() {
				this.getUserlocation()
				var res = await postChargePileSelect();
				if (res.data.code == 1) {
					this.pickerLict = res.data.data
				}
			},
			
			// 获取经纬度
			getUserlocation() {
				const that = this;
				uni.getLocation({
					type: 'gcj02',
					altitude: true,
					isHighAccuracy: true,
					success: function(res) {
						that.latitude = res.latitude;
						that.longitude = res.longitude
					},complete() {
					},
				});
			},
			

			// picker
			pickerChange(e, key) {
				this[key] = e.detail.value;
				if (key == 'operator_index') this.operator_code = this.pickerLict.operator_list[e.detail.value].operator_code
			},

			// 省市区
			openAddres() {
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				this.cityPickerValueDefault = e.value;
				this.city = e.labelArr.join('/'); // 区
			},

			// 上传文件
			upFileImg() {
				uni.showActionSheet({
					title: "选择上传类型",
					itemList: ['图片', '视频'],
					success: (res) => {
						if (res.tapIndex == 0) {
							this.chooseImages()
						} else {
							this.chooseVideo()
						}
					}
				})
			},

			// 上传图片
			chooseImages() {
				util.uploadImageOne({}, res => {
					this.images.push(res.data.url)
				})
			},

			// 上传视频
			chooseVideo() {

				var that = this
				uni.chooseVideo({
					maxDuration: 60,
					count: 1,
					sourceType: ['album'],
					success: (responent) => {
						uni.showLoading({
							title: "上传中"
						})
						let videoFile = responent.tempFilePath;
						let duration = responent.duration
						uni.uploadFile({
							url: upFile,
							method: "POST",
							filePath: videoFile,
							name: 'file',
							success: (res) => {
								res = JSON.parse(res.data)
								uni.hideLoading()
								if(res.code == 1) {
									that.files.push({
										path: res.data.url,
										time: duration
									})
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							}
						})
					}
				})

			},
			
			// 查看图片
			lookImg(url) {
				if(url != '') {
					uni.previewImage({
						current: url,
						urls: [url]
					})
				}
			},
			
			// 参考示例
			ckslImg() {
				uni.previewImage({
					current: 0,
					urls: ["https://d-youpin.bigchun.com/assets/image/ck-1.jpg","https://d-youpin.bigchun.com/assets/image/ck-2.jpg","https://d-youpin.bigchun.com/assets/image/ck-3.jpg"]
				})
			},
			
			// 删除图片或视频
			clearFile(index) {
				this.images.splice(index,1)
			},

			//添加充电桩
			async sendType() {
				var files = [];
				if(this.files.length != 0) {
					this.files.forEach(item => {
						files.push(item.path)
					})
				}
				
				if(this.images.length == 0) {
					uni.showToast({
						title: "请上传图片",
						icon: "none"
					})
					return
				}
				
				var data = {
					device_number: this.device_number,
					manufacturer_id: this.manufacturer_index >= 0 ? this.pickerLict.manufacturer_list[this.manufacturer_index].id : '',
					operator_id: this.operator_index >= 0 ? this.pickerLict.operator_list[this.operator_index].id : '',
					operator_code: this.operator_code,
					kind_id: this.kind_index >= 0 ? this.pickerLict.kind_list[this.kind_index].id : '',
					city: this.city,
					street: this.street,
					community: this.community,
					village: this.village,
					address: this.address,
					longitude: this.longitude,
					latitude: this.latitude,
					port: this.port,
					installtime: this.installtime || '',
					meter_code: this.meter_code,
					unit_type: this.unit_type,
					powers: this.powers,
					install_way: this.azfsIndex >= 0 ? this.azfsArr[this.azfsIndex] : '',
					recharge_way: this.csfsIndex >= 0 ? this.cdfsArr[this.csfsIndex] : '',
					images: this.images.length != 0 ? this.images.join(',') : '',
					files: files.length != 0 ? files : ''
				}
				data.token = uni.getStorageSync('token');

				var res = await postAddChargePile(data)
				if (res.data.code == 1) {
					uni.showToast({
						title: "添加成功",
						success() {
							setTimeout(() => uni.navigateBack(), 1500)
						}
					})
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style scoped>
	page {
		background: #f6f6f8;
	}

	/* 查看 */
	.look-item>view {
		width: 100%;
		padding: 30rpx;
		border-bottom: solid 1rpx #f2f2f2;
		background-color: #FFFFFF;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.look-item .title {
		font-size: 28rpx;
		color: #333;
	}

	.look-item .value {
		font-size: 26rpx;
		color: #686868;
	}

	.title {
		min-width: 180rpx;
		margin-right: 20rpx;
	}

	/* 编辑 */
	.edit-item>view {
		background-color: #FFFFFF;
		padding: 25rpx 30rpx;
		border-bottom: solid 1rpx #f4f4f4;
		width: 100%;
		box-sizing: border-box;
		position: relative;
	}

	.edit-item .title {
		font-size: 24rpx;
		color: #545454;
	}

	.picker-veh {
		width: 110rpx;
	}

	.picker-veh image {
		width: 30rpx;
		height: 30rpx;
	}

	.edit-font {
		font-size: 25rpx;
		color: #323232;
	}

	.right-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.edit-item .must::before {
		content: "*";
		position: absolute;
		left: 12rpx;
		color: #ee0a24;

	}

	/* 编辑 保存 */
	.edit-btn {
		width: 690rpx;
		height: 80rpx;
		background-color: #49c265;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		margin: 20rpx auto;
		border-radius: 10rpx;
	}

	.w-max-100 {
		width: 100%;
	}

	.img-box {
		width: 310rpx;
		height: 200rpx;
		position: relative;
	}

	.img-box image {
		width: 100%;
		height: 100%;
	}
	
	.img-box video {
		width: 100%;
		height: 100%;
	}

	.clzp-box>view {
		margin-right: 30rpx;
		margin-bottom: 30rpx;
		text-align: center;
		font-size: 24rpx;
	}

	/* .clzp-box>view :nth-child(2n+n) {
		margin-right: 0 !important;
	} */

	.head_url {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
	
	.img-box .clear-img {
		width: 35rpx;
		height: 35rpx;
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		z-index: 99;
	}
</style>
